<template>
  <div class="content">
    <div class="contentTop">
      <ul>
        <li v-for="(item, key) in list" :key="key">
          <router-link :to="item.path">
            {{ item.title }}
          </router-link>
        </li>
        <p @click="$router.push('/labelpage')" v-if="localval||$store.state.loginState">标签管理</p>
      </ul>
      
    </div>
    <div class="center">
        <router-view></router-view>
      
      <div class="right" :style="$store.state.shangeTop?'top: 10px':'top: 87px'">
        <Right></Right>
      </div>
    </div>
    
  </div>
</template>

<script>
import { twoTitle } from "../../router/router.config";
import Right from '../../components/right'
export default {
  components:{
        Right
    },
  data() {
    return {
      list: twoTitle(),
      localval:localStorage.getItem('isLogin'),
    };
  },
  // watch:{
  //   $route:{
  //     handler(newVal,oldVal){
  //       console.log(newVal,oldVal)
  //     },
  //     deep:true,
  //     immediate:true,
  //   }
  // }
};
</script>

<style scoped lang="scss">
.contentTop {
  width: 100%;
  height: 45px;
  background: #ffffff;
  
  
  ul {
    width: 960px;
    height: 100%;
    margin: 0 auto;
    line-height: 45px;
    overflow: hidden;
    position: relative;
    p{
      position: absolute;
      right: 0px;
      top: 0px;
      font-size: 14px;
    }
    li {
      float: left;
      font-size: 14px;
      margin-right: 22px;
      a {
        &:hover {
          color: #007fff;
        }
      }
    }
    .router-link-exact-active {
      color: #007fff;
    }
  }
}
.center {
  width: 960px;
  margin: 0 auto;
  position: relative;
}
.right{
  width: 240px;
  height: 1412px;
  position: absolute;
  right: 0;
  top: 87px;
}
</style>